<template>
    <view class="content">
        <image :src="img" class="bg" mode="widthFix"></image>
        <u-navbar :background="background" title="登录" title-color="#fff" :border-bottom="false" :immersive="true" 
            :is-back="true" back-icon-color="#fff"></u-navbar>
        
        <view class="wrpper" :style="{marginTop: statusBar + 240 + 'px'}">
            <view class="title">
                <view class="line"></view>
                <view class="u-p-l-15 u-p-r-15">使用手机号登录</view>
                <view class="line"></view>
            </view>
            
            <view class="item">
                <image src="../../static/icon/tel_01.png" class="tel-01"></image>
                <input type="number" v-model="mobile" placeholder="请输入手机号" placeholder-class="p-inp" class="inp">
            </view>
            <view class="item">
                <view class="u-flex">
                    <image src="../../static/icon/code.png" class="tel-01"></image>
                    <input type="number" v-model="verifyCode" placeholder="验证号" placeholder-class="p-inp" class="inp">
                </view>
                
                <view class="code" :class="{ activeCode: time < 60 }" @click="$noMultipleClicks(getCode)">{{ txt }}</view>
            </view>
            
            <button class="btn" @click="getUserInfo">登录</button>
            
            <view class="flex align-top" @click="agree">
                <view class="frame" :class="act ? 'activeIcon' : ''">
                    <u-icon name="checkbox-mark" color="#682604" size="30" v-if="act"></u-icon>
                </view>
                <view class="login-tip">
                    登录代表我已阅读并同意
                    <text class="tip" @click.stop="toPage('/mine/pages/other/user-agreement')">《用户协议》</text>
                    和
                    <text class="tip" @click.stop="toPage('/mine/pages/other/user-privacy')">《隐私政策》</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                noClick:true,
                code: '',
                act: false,
                mobile: '',
                verifyCode: '', //验证码
                time: 60, // 倒计时
                txt: '发送验证码',
                img: '',//背景图片
            };
        },
        onLoad() {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            this.getImg()
        },
        onShow() {
            const _this = this;
            uni.login({
            	provider: 'weixin',
            	success: res => {
                    console.log(res)
            		_this.code = res.code
            	},
            	fail(err) {
            		console.log('登录失败' + JSON.stringify(err))
            	}
            })
            
        },
        methods: {
            toPage(url) {
                uni.navigateTo({
                    url: url
                })
            },
            
            agree() {
                this.act = !this.act
                console.log('act',this.act)
            },
            
            getUserInfo() {
                const _this = this;
            	if (!_this.mobile) {
            	    _this.$toast('请输入手机号码');
            	    return false;
            	}
                if (!_this.$checkPhone(_this.mobile)) {
                    _this.$toast('手机号码格式不正确');
                    return false;
                }
                if (!_this.verifyCode) {
                    _this.$toast('请输入验证码');
                    return false;
                }
                if (!_this.act) {
                    _this.$toast('请先同意用户协议和隐私政策');
                    return false;
                }
                
            	uni.getUserProfile({
            		desc: '登录用于展示您的用户信息',
            		success: function(infoRes) {
            			_this.$ajax('weixin_login', {
            				encryptedData: infoRes.encryptedData,
            				iv: infoRes.iv,
            				code: _this.code,
                            scene: _this.$getSync('parentID') || '',
                            mobile: _this.mobile,
                            verify_code: _this.verifyCode,
                            city_id: _this.$getSync('CITY').id,
            			}).then(ret => {
            				if (ret.success == 1000) {
                                uni.setStorageSync('userToken', ret.detail.user_token);
                                uni.setStorageSync('userType', ret.detail.user_type);
                                
                                uni.navigateBack({
                                	delta: 1
                                })
            				} else {
            					_this.$toast(ret.msg);
            				}
            			})
            		}
            	})
            },
            
            // 获取验证码
            getCode() {
                let _this = this;
                if (!_this.mobile) {
                    _this.$toast('请输入手机号码');
                    return false;
                }
                if (!_this.$checkPhone(_this.mobile)) {
                    _this.$toast('手机号码格式不正确');
                    return false;
                }
                if (_this.time != 60) {
                    return false;
                }
                _this.$ajax('verify', {
                    mobile: _this.mobile,
                }).then(ret => {
                    if (ret.success == 1000) {
                        _this.txt = _this.time + 'S后可再次获取';
                        let fn = setInterval(() => {
                            _this.time--;
                            _this.txt = _this.time + 'S后可再次获取';
                            if (_this.time == 0) {
                                clearInterval(fn);
                                _this.time = 60;
                                _this.txt = '获取验证码';
                            }
                        }, 1000);
                    } else {
                        _this.$toast(ret.msg);
                    }
                });
            },
            
            getImg() {
                this.$ajax('login_image', {
                    
                }).then(ret => {
                    this.img = ret.detail.image
                });
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #fff;
    }
    .bg{
        width: 750rpx;
        height: 660rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .wrpper{
        background-color: #fff;
        border-radius: 40rpx 40rpx 0 0;
        padding: 60rpx 70rpx;
    }
    .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        padding-bottom: 40rpx;
    }
    .line{
        width: 190rpx;
        height: 2rpx;
        background-color: #cdcdcd;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 600rpx;
        height: 90rpx;
        background-color: #f6f7f9;
        border-radius: 50rpx;
        margin-bottom: 20rpx;
        padding: 0 30rpx;
    }
    .tel-01{
        width: 31rpx;
        height: 37rpx;
        margin-right: 15rpx;
    }
    .inp{
        flex: 1;
    }
    .p-inp{
        color: #787c92;
    }
    .activeCode {
        // background: #cccccc;
        // color: #fff;
    }
    .code {
        font-size: 26rpx;
        color: #000;
    }
    
    
    // .btn{
    //     font-size: 32rpx;
    //     color: #fff;
    //     text-align: center;
    //     padding: 25rpx;
    //     background-color: #f29700;
    //     border-radius: 50rpx;
    //     margin-top: 40rpx;
    //     margin-bottom: 140rpx;
    // }
    .btn{
        height: 92rpx;
        font-size: 32rpx;
        color: #fff;
        text-align: center;
        line-height: 92rpx;
        background-color: #f29700;
        border-radius: 90rpx;
        margin-top: 40rpx;
        margin-bottom: 140rpx;
    }
    .btn::after{
        border: none;
    }
    
    
    
    .frame {
        width: 33rpx;
        height: 33rpx;
        border-radius: 10%;
        border: 2rpx solid #cdcdcd;
        position: relative;
        margin-right: 12rpx;
        margin-top: 4rpx;
    
        /deep/ u-icon {
            transform: scale(0);
            position: absolute;
            top: -7%;
            left: -2%;
        }
    }
    
    .activeIcon {
        background-color: #ffda65;
        border: none;
        
        /deep/ u-icon {
            transform: scale(1);
        }
    }
    .login-tip{
        font-size: 26rpx;
        color: #9c9c9c;
    }
    .tip{
        color: #ff8103;
    }
    
    
    

</style>
